import React from "react";
// 引入地图组件
import { TMap } from '@map-component/react-tmap';

const Info = () => {
    const back = () => {
        React.navigate(-1)
    }
    React.useEffect(() => {
        getRoomData()
        getCommentData()
    }, [])
    // 接收酒店id
    const [useSearchParams] = React.Router.useSearchParams()
    const [rid, setRid] = React.useState(useSearchParams.get("rid"))
    // 获取房间数据
    const [room, setRoom] = React.useState({
        name: "",
        thumb_text: "",
        flag_text: [],
        content: "",
        price: 0,
        total: 0,
        state: false,
        surplus: 0
    })
    const getRoomData = async () => {
        let result = await React.HTTP.post("/room/info", { rid })
        if (result.code == 1) {
            setRoom(result.data)
        } else {
            React.error(result.msg, () => {
                React.navigate(-1)
            })
            return false
        }
    }
    // 获取评论数据
    const [comment, setComment] = React.useState([])
    // 计算评分
    const [rate,setRate] = React.useState(0)
    const getCommentData = async () => {
        let result = await React.HTTP.post("/room/comment", { rid });
        if (result.code == 1) {
            setComment(result.data)
            let theRate = 0
            result.data.forEach((item:any)=>{
                theRate += item.rate
            })
            setRate(theRate/result.data.length)
        } else {
            return false
        }
    }
    // 立即预订
    const confirm = () => {
        React.navigate(`/room/reserve?rid=${rid}`)
    }
    return (<>
        <link rel='stylesheet' href="/assets/css/detail.css" />
        <React.UI.NavBar
            onBack={back}
            style={{ background: `rgb(55, 68, 134)`, color: '#fff' }}
        >
            {room.name ?? "房间详情"}
        </React.UI.NavBar>
        <React.UI.Image src={room.thumb_text} width={'100%'} fit="fill" />
        <div className='detail_top'>
            <div id="intro" className="intro">
                <div className="title">{room.name}</div>
                <div className="betwee">
                    <div className="left">
                        {room.flag_text && room.flag_text.map((flag: any, index: any) => <span key={index}>{flag}</span>)}
                    </div>
                    {/* <div className="right">分享</div> */}
                </div>
                <div className="title">{room.content}</div>
            </div>

            <div className="notesin">
                <div className="title">预订须知</div>
                <div className="item">
                    <span className="tips">预订房型：</span>
                    <span>{room.name}</span>
                </div>
                <div className="item">
                    <span className="tips">入离时间：</span>
                    <span>当天 12:00 后入住，次日 12:00 前退房</span>
                </div>
                <div className="item">
                    <span className="tips">剩余房间数量：</span>
                    <span>{room.surplus}</span>
                </div>
            </div>

            <div className="comment map">
                <div className="title">地图路线</div>
                <TMap
                    mapKey="ZPMBZ-BWI3M-PP56L-66XNR-E7JYV-44B72"
                    version='1.exp'
                    center={{ lat: 39.984104, lng: 116.307503 }}
                >
                </TMap>
            </div>

            <div id="comment" className="comment">
                <div className="title">{room.name}的评价</div>
                {/* 评分 */}
                <React.UI.AutoCenter>
                    <React.UI.Rate allowHalf value={rate} />
                </React.UI.AutoCenter>
                <React.UI.List className="list">
                    {comment.map((item: any, index: number) => (
                        <React.UI.List.Item
                            key={index}
                            prefix={
                                <React.UI.Image
                                    src={item.business.avatar_text}
                                    style={{ borderRadius: 20 }}
                                    fit='cover'
                                    width={40}
                                    height={40}
                                />
                            }
                            description={item.comment}
                        >
                            {item.business.nickname}
                        </React.UI.List.Item>
                    ))}
                </React.UI.List>

                <React.UI.AutoCenter>
                    <React.Router.Link to={'/room/comment?rid=' + rid}>查看更多评价</React.Router.Link>
                </React.UI.AutoCenter>
            </div>
        </div>

        <div className="foot-bar">
            <div className="price">
                ￥{room.price}
            </div>
            <React.UI.Button onClick={confirm} color='primary' disabled={room.state ? false : true}>立即预定</React.UI.Button>
        </div>
    </>)
}

export default Info